<template>
  <view>
    <scroll-view :scroll-y="true" class="order-list">
      <view v-for="item in orders" :key="item.id" class="order-item">
        <u-image
          :src="require('@/static/images/movie/' + item.imgSrc)"
          width="172rpx"
          height="310rpx"
          border-radius="14rpx"
        ></u-image>
        <view>
          <view class="movie-name"> {{ item.movieName }}</view>
          <view class="opera-name"> {{ item.operaName }}</view>
          <view class="time"> {{ item.date }} {{ item.time }}</view>
          <view
            class="status"
            :style="{ color: item.status === 1 ? '#74ceca' : 'red' }"
            >{{ item.status === 1 ? '交易成功' : '交易取消' }}</view
          >
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const orderData = require('@/mock/order/index.json');

export default defineComponent({
  setup() {
    const orders = orderData.orders;
    return {
      orders,
    };
  },
});
</script>

<style lang="scss" scoped>
.order-list {
  width: calc(100% - 80rpx);
  height: calc(100vh - 300rpx - 102rpx - 40rpx);
  padding: 40rpx 40rpx 0rpx 40rpx;

  .order-item {
    width: 100%;
    margin-bottom: 50rpx;
    display: flex;

    view {
      margin-left: 32rpx;
      .movie-name {
        font-size: 32rpx;
        font-weight: 700;
        margin-bottom: 20rpx;
      }
      .opera-name,
      .time {
        font-size: 28rpx;
        margin-bottom: 20rpx;
      }

      .time {
        margin-bottom: 40rpx;
      }
    }
  }
}
</style>
